<template>
    <el-container>
        <el-aside width="200px">
            <SideMenu></SideMenu>
        </el-aside>
        <el-container>
            <el-header>
                <strong>VueAdmin后台管理系统</strong>
                <div class="header-avatar">
                    <el-avatar size="medium" :src="userInfo.avatar">
                    </el-avatar>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            {{userInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <router-link to="/userCenter">
                                    个人中心
                                </router-link>
                            </el-dropdown-item>
                            <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-link href="https://gitee.com/sun-liangzhao" target="_blank">gitee</el-link>
                    <el-link href="https://www.cnblogs.com/cn-mrs/" target="_blank">博客</el-link>
                </div>

            </el-header>
            <el-main>
                <Tabs></Tabs>
                <div style="margin:0 15px;">
                    <router-view></router-view>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import SideMenu from './include/SideMenu.vue'
import Tabs from './include/Tabs.vue'
export default {
    components: {
        SideMenu,Tabs
    },
    data() { 
        return {
            userInfo: {
                id: '',
                username: '',
                avatar:''
            }
        }
    },
    created() { 
        this.getUserInfo()
    },
    methods: {
        getUserInfo() { 
            this.$axios.get('/sys/userInfo').then(res => { 
                this.userInfo=res.data.data
            })
        },
        logout(){
            this.$axios.post('/logout').then(res => {
                localStorage.clear()
                sessionStorage.clear()

                this.$store.commit('resetState')
                this.$router.push('/login')
            })
         }
    }
}
</script>

<style scoped>

        .el-container {
            height: 100vh;
        }
    
        .header-avatar {
            width: 210px;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
    
        .el-dropdown-link {
            cursor: pointer;
        }
    
        .el-header {
            display: flex;
            justify-content: end;
            background-color: #17B3A3;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
    
        strong {
            margin-right:20%;
        }
    
        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            line-height: 200px;
        }
    
        .el-main {
            color: #333;
            /* text-align: center; */
            /* line-height: 160px; */
            padding:0;
        }
    
        .el-menu-vertical-demo {
            height: 100vh;
        }
        a{
            text-decoration: none;
        }
</style>